<template>
 <div>
     <el-button @click="addUser()" type="primary" icon="el-icon-plus" size="small">添加</el-button>
        <div style="float: right">
              <el-row>
                  <el-col :span="22">
                    <el-input placeholder="请输入客户名称" size="small" v-model="search.cName" class="input-with-select">
                        <el-select v-model="search.active" style="width:100px" slot="prepend" placeholder="请选择客户状态">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="正常" value="1"></el-option>
                            <el-option label="已删除" value="0"></el-option>
                        </el-select>
                        <el-button slot="append" icon="el-icon-search" @click="findData"></el-button>
                    </el-input>
                  </el-col>
              </el-row>
          </div>
    <el-table
      :data="usersData.list"
      border
      style="width: 100%">
      <el-table-column
        label="客户ID"
        width="80">
        <template slot-scope="scope">
          <i class="el-icon-client-id"></i>
          <span style="margin-left: 10px">{{ scope.row.cId}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="联系人"
        width="90">
        <template slot-scope="scope">
          <i class="el-icon-name"></i>
          <span style="margin-left: 10px">{{ scope.row.cName}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="送机时间"
        width="120">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.postTime}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="手机"
        width="140">
        <template slot-scope="scope">
          <i class="el-icon-phone"></i>
          <span style="margin-left: 10px">{{ scope.row.phone}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="邮箱"
        width="180">
        <template slot-scope="scope">
          <i class="el-icon-email"></i>
          <span style="margin-left: 10px">{{ scope.row.email}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        width="120">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.createTime}}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="客户性质"
        width="80"
        prop="cType"
        :formatter="typeformat"
        highlight-current-row="true">
      </el-table-column>
      <el-table-column
          prop="active"
          width="80"
          label="客户状态">
        <div slot-scope="scope" style="width: 100%;text-align: center">
          <el-tag v-if="scope.row.active">正常</el-tag>
          <el-tag v-else type="danger">被删除</el-tag>
        </div>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button title="编辑" @click="editUser(scope.row)" :disabled="scope.row.active == 0" type="primary" icon="el-icon-edit" size="small" circle></el-button>
            <el-button title="删除" @click="deleteUser(scope.row)" v-if="scope.row.active != '0'" type="danger" icon="el-icon-delete" circle size="small"></el-button>
            <el-button title="恢复" @click="deleteUser(scope.row)" v-else icon="el-icon-check" circle size="small"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 100%;text-align: center">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="usersData.total"
          :current-page="this.queryParams.pageNo"
          :page-size="this.queryParams.pageSize"
          @current-change="changePageNo">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import AddUser from '@/views/userManage/userAdd.vue';
  import UserEdit from '@/views/userManage/userUpdate.vue';
  import {deleteUser as deleteUser} from '../../api/client';
  import {clientList as client} from '../../api/client';

  export default {
    inject:['reload'],
    data() {
      return {
        search:{
            active:"",
            cName:"",
            cId:""
        },
        queryParams:{
            pageNo:1,
            pageSize:10,
            active:"",
            cName:""
        },
        usersData: {}
      }
    },
    created() {
      this.getList(this.queryParams);
    },
    watch:{
     queryParams:{
        handler: function(){
          let param = new URLSearchParams();
          param.append('pageNo',this.queryParams.pageNo);
          param.append('pageSize',this.queryParams.pageSize);
          param.append('active',this.queryParams.active);
          param.append('cName',this.queryParams.cName);
          this.getList(param);
        },
        deep: true
      }
    },
    methods: {
      getList(params) {
        let that = this;
        console.log("参数"+params);
        client(params).then(r=>{
          that.usersData = r;
          console.log(this.usersData);
        }).catch(_=>{
          console.log(_);
        })
      },
      findData(){
        this.queryParams.pageNo=1;
        this.merge(this.search,this.queryParams);
      },
      typeformat(row, column, cellValue, index){
        if (cellValue == 1) {
          return "家庭用户";
        }else if (cellValue == 2) {
          return "单位用户";
        }else if (cellValue == 3) {
          return "代理商";
        }else{
          return "签约用户";
        }
      },
      addUser() {
      let that = this;
                this.$layer.iframe({
                    content: {
                        content: AddUser, //传递的组件对象
                        parent: this,//当前的vue对象
                        data: {}//props
                    },
                    area: ['400px', '500px'],
                    title: '添加客户信息',
                    shade: true,
                    shadeClose: false,
                    cancel(){
                        console.log("关闭")
                        let params = new URLSearchParams();
                        //that.queryParams.pageNo = '1';
                        that.queryParams.pageNo = 1
                        params.append('pageNo', that.queryParams.pageNo);
                        params.append('pageSize', that.queryParams.pageSize);
                        that.getList(params);
                    }
                });
      },
      deleteUser(row){
          let param = new URLSearchParams();
          let txt=row.active==1?"确定要删除该数据吗？":"确定要恢复该数据吗";
          param.append('cId',row.cId);
          param.append("cName", row.cName);
          param.append("idcardNum", row.idcardNum);
          param.append("postTime",row.postTime);
          param.append("cType", row.cType);
          param.append("cCall",row.cCall);
          param.append("phone",row.phone);
          param.append("postNum",row.postNum);
          param.append("email",row.email);
          param.append("unitName",row.unitName);
          param.append("cAddress",row.cAddress);
          //param.append("active",row.active);
          //this.del(row.cId,row.active);
          if(row.active == 1){
            console.log(row);
            param.append("active",'0');
            deleteUser(param).then(r=>{
                setTimeout(() => {
                  this.$notify({
                    title:"删除客户成功",
                    type:"success"
                  });
                });
            }).catch(_=>{
                console.log("删除客户失败！");
            });
          }else{
              console.log(row);
              param.append("active",'1');
              deleteUser(param).then(r=>{
                setTimeout(() => {
                  this.$notify({
                    title:"恢复客户成功",
                    type:"success"
                    
                  });
                });
              }).catch(_=>{
                  console.log("恢复客户失败！");
              });
            }
          let params = new URLSearchParams();
          let that = this;
          params.append('pageNo', that.queryParams.pageNo);
          params.append('pageSize', that.queryParams.pageSize);
          that.getList(params);
      },
      editUser(row){
        
        let that = this;
                this.$layer.iframe({
                    content: {
                        content: UserEdit, //传递的组件对象
                        parent: this,//当前的vue对象
                        data: {cId:row.cId}//props
                    },
                    area: ['400px', '500px'],
                    title: '修改客户记录',
                    shade: true,
                    shadeClose: false,
                    cancel(){
                        console.log("关闭")
                        let params = new URLSearchParams();
                        params.append('pageNo', '1');
                        params.append('pageSize', '10');
                        that.getList(params);
                    }
                });
      },
      changePageNo(i){
        // alert(i);
        this.queryParams.pageNo=i;
      }
    //   components: { 
    //       ToolBar,HelpHint
    // }
  }
}
</script>
<style lang="scss">

</style>
